/**---------------------**
*!  Obsidian Everforest
*?
*? 1. Variables
*?   - Implementation
*? 2. Themes
*?   - Dark
*?   - Light
*? 2. General UI
*?   - Workspace
*?   - Menus
*?   - Sidebars
*?   - Canvas
*?   - Loading Screen
*? 4. Markdown
*?   - Emphasis
*?   - Code
*?   - Links
*?   - Lists
*?   - Blockquotes
*?   - Tables
*?   - Tags
*?   - Embeds
*?   - YAML
*?   - Graph
*? 5. Mobile
*? 6. Cursor
*? 7. Style Settings
*?   - Custom Stacked Panes
*?   - Custom Background Image
*? 8. Extra Fixes
*?   - Callouts
*?   - Image Formatting
*?   - CSS Classes
*?   - Misc.
*?
 **---------------------**/

/**** Implementation ****/

:root body:where(.theme-dark, .theme-light) {
    /** Miscellaneous **/

    --checkbox-size: calc(var(--font-text-size) - 2px);
    --checkbox-radius: 25%;

    /* Adjusted in Style Settings */
    --list-indent: var(--list-indent-custom, 28px);
    --list-spacing: 0;
    --list-bullet-size: 6px;

    --file-folding-offset: 22px;

    --shadow-l: 0 4px 14px -2px hsla(0, 0%, 0%, 40%);

    /* Adjusted in Style Settings */
    --file-line-width: var(--readable-line-length-custom, 700px);

    /** Backgrounds **/

    --background-modifier-border: var(--bg5);
    --background-modifier-border-hover: var(--bg3);
    --background-embed: var(--background-embed-transparent);
    --embed-block-shadow-hover: var(--shadow-l);
    --blockquote-background-color: var(--background-embed);

    --background-primary: var(--bg0);
    --background-primary-rgb: var(--bg0-rgb);
    --background-primary-alt: var(--bg0);
    --background-secondary: var(--bg0);
    --background-secondary-alt: var(--bg0);

    /** General Colors **/

    --text-normal: var(--fg);
    --text-muted: var(--color-base-70);
    --text-faint: var(--grey1);
    --text-selection: var(--bg-visual);

    --link-color: var(--header-aqua);
    --link-color-hover: var(--fg-aqua);
    --link-external-color: var(--header-blue);
    --link-external-color-hover: var(--fg-blue);
    --text-accent: var(--header-blue);
    --text-accent-hover: var(--header-purple);

    --link-unresolved-decoration-style: dashed;
    --link-unresolved-color: var(--header-blue);
    --link-unresolved-color-hover: var(--header-purple); /* Non-standard */
    --link-unresolved-decoration-color: var(--bg-red);
    --link-unresolved-decoration-color-hover: var(--fg-red); /* Non-standard */

    --code-header: #0004;
    --code-background: var(--bg-dim);
    --code-normal: var(--text-muted);
    --code-inline: var(--fg-blue);

    --code-normal: var(--fg);
    --code-comment: var(--grey1);
    --code-function: var(--fg-green);
    --code-important: var(--fg-red);
    --code-keyword: var(--fg-blue);
    --code-operator: var(--fg-orange);
    --code-property: var(--fg-aqua);
    --code-punctuation: var(--grey1);
    --code-string: var(--fg-yellow);
    --code-tag: var(--fg-orange);
    --code-value: var(--fg-purple);

    --table-background: var(--bg2);
    --table-column-alt-background: unset;
    --table-row-alt-background: var(--bg1);
    --table-header-background: var(--bg-green);
    --table-header-background-hover: var(--bg-green);
    --table-row-background-hover: var(--bg4);

    --interactive-before: var(--bg4);
    --interactive-accent: var(--header-aqua);
    --interactive-accent-hover: var(--header-blue);

    --text-highlight-bg: var(--bg-yellow);

    --heading-formatting: ;

    --tag-color: var(--header-blue);
    --tag-background: hsla(var(--tag-color-hsl), 0.1);
    --tag-background-hover: hsla(var(--tag-color-hsl), 0.2);

    --checkbox-color: var(--fg-blue);

    --canvas-dot-pattern: var(--color-base-50);

    /** Headers **/

    --h1-color: var(--header-red);
    --h2-color: var(--header-orange);
    --h3-color: var(--header-yellow);
    --h4-color: var(--header-green);
    --h5-color: var(--header-blue);
    --h6-color: var(--header-purple);

    --h1-size: 2.125em;
    --h2-size: 1.625em;
    --h3-size: 1.375em;
    --h4-size: 1.25em;
    --h5-size: 1.125em;
    --h6-size: 1em;

    --h1-line-height: 1.5;
    --h2-line-height: 1.5;
    --h3-line-height: 1.5;
    --h4-line-height: 1.5;
    --h5-line-height: 1.5;
    --h6-line-height: 1.5;

    --h1-weight: 500;
    --h2-weight: 500;
    --h3-weight: 500;
    --h4-weight: 500;
    --h5-weight: 500;
    --h6-weight: 500;
}

/** Mobile mode fixes **/
:root body.is-mobile {
    --input-shadow-hover: var(--input-shadow);
    --input-border-width: 1px;
    --file-margins: 16px 20px;
}
/* Dark mode */
:root body.is-mobile.theme-dark {
    --input-shadow: inset 0 1px 1px 0.5px rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.4);
    --interactive-normal: var(--color-base-30);
    --background-modifier-form-field: var(--color-base-25);
}
/* Light mode */
:root body.is-mobile.theme-light {
    --input-shadow: inset 0 0 0.5px 1px rgba(0, 0, 0, 0.1),
        0 2px 3px rgba(0, 0, 0, 0.1);
    --interactive-normal: var(--color-base-00);
    --background-modifier-form-field: var(--color-base-00);
}

/**** Theme Colors ****/

/** Dark Theme (Soft) **/

:root .theme-dark {
    --bg-dim-rgb: 41, 49, 54;
    --bg-dim: #293136;
    --bg0: #333c43;
    --bg1: #3a464c;
    --bg2: #434f55;
    --bg3: #4d5960;
    --bg4: #555f66;
    --bg5: #5d6b66;

    --bg-visual: #5c3f4f;
    --bg-red: #59464c;
    --bg-green: #48584e;
    --bg-blue: #3f5865;
    --bg-yellow: #55544a;

    --fg: #d3c6aa;

    --fg-red: #e67e80;
    --fg-orange: #e69875;
    --fg-yellow: #dbbc7f;
    --fg-green: #a7c080;
    --fg-aqua: #83c092;
    --fg-blue: #7fbbb3;
    --fg-purple: #d699b6;

    --header-red: #da6362;
    --header-orange: #d77f48;
    --header-yellow: #bf983d;
    --header-green: #899c40;
    --header-aqua: #569d79;
    --header-blue: #5a93a2;
    --header-purple: #b87b9d;

    --grey0: #7a8478;
    --grey1: #859289;
    --grey2: #9da9a0;

    --statusline0: #a7c080;
    --statusline1: #d3c6aa;
    --statusline2: #e67e80;

    --bg0-rgb: 51, 60, 67;
    --background-embed-transparent: rgba(62, 75, 80, 0.7);
    --tag-color-hsl: 254, 80%, 68%;
}

/** Light Theme (Hard) **/

:root .theme-light {
    --bg-dim-rgb: 242, 239, 223;
    --bg-dim: #f2efdf;
    --bg0: #fffbef;
    --bg1: #f8f5e4;
    --bg2: #f2efdf;
    --bg3: #edeada;
    --bg4: #e8e5d5;
    --bg5: #bec5b2;

    --bg-visual: #ded8db; /* Changed for visibility */
    --bg-red: #ffe7de;
    --bg-green: #f3f5d9;
    --bg-blue: #ecf5ed;
    --bg-yellow: #fef2d5;

    --fg: #5c6a72;

    --fg-red: #f85552;
    --fg-orange: #f57d26;
    --fg-yellow: #dfa000;
    --fg-green: #8da101;
    --fg-aqua: #35a77c;
    --fg-blue: #3a94c5;
    --fg-purple: #df69ba;

    --header-red: #f85552;
    --header-orange: #f88f44;
    --header-yellow: #f3b931;
    --header-green: #abd113;
    --header-aqua: #569d79;
    --header-blue: #5a93a2;
    --header-purple: #dd2b8d;

    --grey0: #a6b0a0;
    --grey1: #939f91;
    --grey2: #829181;

    --statusline0: #93b259;
    --statusline1: #708089;
    --statusline2: #e66868;

    --bg0-rgb: 255, 251, 239;
    --background-embed-transparent: rgb(238 236 213 / 70%); /* Using bg2 */
    --tag-color-hsl: 254, 80%, 68%;
}

/**** General UI ****/

/** Workspace **/

/* Title bar */
.workspace-leaf .view-header {
    box-shadow: 0 0 8px -4px var(--divider-color);
}

/* Title text */
.view-header-title {
    font-weight: 600;
}

/* Gutters */
.markdown-source-view.mod-cm6 .cm-gutters {
    padding-inline-end: var(--file-folding-offset);
    pointer-events: none;
}
.cm-gutter .cm-active {
    color: var(--text-normal);
}

/* Make gutters not affect the content flow for unstacked tabs */
.workspace-tabs:not(.mod-stacked)
    .mod-cm6.is-readable-line-width:not(.full-width),
body:not(.stacked-panes-gutter-disable-float)
    .workspace-tabs.mod-stacked
    .mod-cm6.is-readable-line-width {
    .cm-contentContainer {
        display: grid !important;
    }
    :is(.cm-gutters, .cm-content) {
        grid-area: 1 / -1;
    }
    .cm-content {
        width: unset !important;
    }
    .cm-gutters {
        justify-self: left;
        translate: -100% 0;
    }
}

/* Smaller margins for stacked tabs */
.mod-stacked {
    --file-margins: 32px 12px;
}

/* Collapse indicator */
.markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator {
    padding-right: 0.45rem;
}
.markdown-source-view.mod-cm6
    .cm-line:not(.cm-active):not(.HyperMD-header):not(
        .HyperMD-task-line,
        .HyperMD-list-line-1
    )
    .cm-fold-indicator
    .collapse-indicator {
    padding-right: 0.75rem;
}
div ul.has-list-bullet ul.has-list-bullet .collapse-indicator {
    margin-left: -2.75rem;
}
.markdown-rendered .list-collapse-indicator {
    padding-right: 1rem;
}

/* Hide extra tab dividers */
.workspace-tab-header:has(+ .is-active) > .workspace-tab-header-inner::after {
    visibility: hidden;
}

/* Change outliner navigation highlight */
.is-flashing {
    background-color: transparent !important;
    color: inherit;
    border-radius: 0;
    box-shadow: 0 4px 0 var(--text-highlight-bg);
}

/* Fix gutter number vertical cutoff */
:root .cm-lineNumbers .cm-gutterElement {
    line-height: normal !important;
}

/** Menus **/

/* Checkboxes and dropdowns */
select:hover,
select:focus-within,
button:hover {
    transition: background-color var(--anim-duration-superfast) ease-out;
}

/* Modal transitions */
body:not(.disable-menu-animations, .enable-menu-blur) .modal-bg {
    animation: fade-in var(--anim-duration-superfast) linear;
}
body:not(.disable-menu-animations) :is(.modal, .prompt) {
    animation:
        fade-in var(--anim-duration-superfast),
        slide-in var(--anim-duration-superfast) ease-out;
}
@keyframes slide-in {
    0% {
        translate: 0 4px;
    }
    100% {
        translate: 0 0;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/** Sidebars **/

/* Stop the scrollbar from causing layout shifts */
.nav-files-container {
    scrollbar-gutter: stable;
    padding-right: var(--size-2-2);
}

/** Canvas **/

/* Changed in Style Settings */

/** Loading Screen **/

/* Text trees */
.progress-bar-message::before {
    content: "🌲 ";
}
.progress-bar-message::after {
    content: " 🌲";
}

/* Progress bars */
.progress-bar-indicator {
    height: 12px;
    overflow-y: hidden;
    width: min(90vw, 1200px);
}
.progress-bar-indicator,
.progress-bar-subline {
    border-radius: 12px;
}
.progress-bar-line,
.progress-bar-subline {
    overflow: hidden;
    height: 100%;
}

/**** Markdown ****/

/** Headers **/

/* Fix update formatting coloring */
.cm-formatting-header {
    color: unset;
}

/* Remove top padding from the first element in reading mode (presumably a header) */
.mod-header + div:has(pre.frontmatter) + div > *,
.mod-header + div > * {
    margin-top: 0;
}

/** Emphasis **/

/* Bold and italic */
.cm-s-obsidian span.cm-strong,
strong,
.cm-s-obsidian span.cm-em,
em,
.language-markdown :is(.bold, .italic) > *,
span:is(.cm-em, .cm-strong) + .cm-widgetBuffer + span.math,
span.math:has(+ .cm-widgetBuffer + span:is(.cm-em, .cm-strong)) {
    color: var(--fg-purple);
}

/* Strike through */
.cm-strikethrough,
del {
    color: var(--text-faint);
}

/** Code **/

/* Inline code */
.cm-s-obsidian
    span.cm-inline-code:not(.cm-formatting):not(
        .cm-formatting + .cm-inline-code
    ),
.markdown-rendered code {
    background-color: var(--code-background);
    padding: 0.1em 0.25em;
    border-radius: var(--radius-s);
    font-size: var(--code-size) !important; /* required for lp */
}
/* Fix other elements' inline code */
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting),
.markdown-rendered
    :is(table, p, li, .callout-title-inner, h1, h2, h3, h4, h5, h6)
    code {
    color: var(--code-inline);
}

/* Codeblock */
.cm-s-obsidian pre.HyperMD-codeblock {
    background-color: var(--code-background);
}
pre {
    border: 1px solid var(--code-header);
}
.HyperMD-codeblock {
    border-color: var(--code-header);
    border-style: solid;
    border-width: 0 1px 0;
}
.HyperMD-codeblock-begin {
    border-width: 1px 1px 0;
}
.HyperMD-codeblock-end {
    border-width: 0 1px 1px;
}

/* Disable wrap on language blocks */
.markdown-reading-view .markdown-preview-view pre:not(.frontmatter) code {
    white-space: pre;
}

/* Codeblock top bars */
pre[class^="language-"] {
    padding-top: calc(
        var(--size-4-2) + var(--code-size) * var(--line-height-normal) + 1px
    );
}
pre[class^="language-"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: calc(var(--code-size) * var(--line-height-normal));
    background-color: var(--code-header);
}
.HyperMD-codeblock-begin-bg:not(:has(> .code-block-flair > *)):has(
        > .code-block-flair
    ) {
    overflow: hidden;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--code-header);
        /* border-radius: 4px 4px 0 0; */
    }
}

/* Codeblock language labels */
pre[class^="language-"]::after {
    content: attr(class);
    position: absolute;
    top: 0;
    right: 6px;
    padding: 0 4px;
    height: calc(1em * var(--line-height-normal));
    display: flex;
    place-items: center;
    color: var(--text-muted);
    font-size: 0.875em;
}
.markdown-source-view.mod-cm6 .code-block-flair:not(:has(> svg)) {
    top: 0;
    padding: 0 4px;
    height: calc(1em * var(--line-height-normal));
    display: flex;
    place-items: center;
    font-family: var(--font-monospace);
    font-size: 1em;
}
.markdown-rendered pre[class^="language-"] button.copy-code-button {
    top: calc(6px + var(--code-size) * var(--line-height-normal));
}

pre.language-applescript::after {
    content: "AppleScript";
}
pre.language-armasm::after,
pre.language-arm-asm::after {
    content: "ARM Assembly";
}
pre.language-bash::after {
    content: "Bash";
}
pre.language-c::after {
    content: "C";
}
pre.language-cpp::after {
    content: "C++";
}
pre.language-cs::after {
    content: "C#";
}
pre.language-css::after {
    content: "CSS";
}
pre.language-flow::after {
    content: "Flow";
}
pre.language-git::after {
    content: "GIT";
}
pre.language-haskell::after {
    content: "Haskell";
}
pre.language-html::after {
    content: "HTML";
}
pre.language-ini::after {
    content: "INI";
}
pre.language-java::after {
    content: "JAVA";
}
pre.language-javascript::after {
    content: "JavaScript";
}
pre.language-js::after {
    content: "JavaScript";
}
pre.language-json::after {
    content: "JSON";
}
pre.language-lua::after {
    content: "Lua";
}
pre.language-makefile::after {
    content: "Makefile";
}
pre.language-md::after,
pre.language-markdown::after {
    content: "Markdown";
}
pre.language-matlab::after {
    content: "MATLAB";
}
pre.language-nginx::after {
    content: "Nginx";
}
pre.language-node::after {
    content: "Node";
}
pre.language-php::after {
    content: "PHP";
}
pre.language-py::after {
    content: "Python";
}
pre.language-python::after {
    content: "Python";
}
pre.language-r::after {
    content: "R";
}
pre.language-react::after {
    content: "React";
}
pre.language-regex::after {
    content: "Regex";
}
pre.language-rust::after {
    content: "Rust";
}
pre.language-sequence::after {
    content: "Sequence";
}
pre.language-shell::after {
    content: "Shell";
}
pre.language-sql::after {
    content: "SQL";
}
pre.language-text::after {
    content: "Plain Text";
}
pre.language-ts::after {
    content: "TypeScript";
}
pre.language-toml::after {
    content: "TOML";
}
pre.language-txt::after {
    content: "Plain Text";
}
pre.language-typescript::after {
    content: "TypeScript";
}
pre.language-url::after {
    content: "URL";
}
pre.language-vim::after {
    content: "vimrc";
}
pre.language-xml::after {
    content: "XML";
}
pre.language-yaml::after {
    content: "YAML";
}
pre.language-zsh::after {
    content: "zsh";
}

/** Links **/

:root a {
    transition: opacity 0s;
}

/* Unresolved links */
:root:root a.is-unresolved:hover,
.markdown-source-view.mod-cm6 .is-unresolved .cm-underline:hover {
    text-decoration-color: var(--link-unresolved-decoration-color-hover);
    color: var(--link-unresolved-color-hover);
}
.cm-s-obsidian span.cm-hmd-internal-link:hover {
    text-decoration: none;
}

/** Lists **/

.markdown-source-view span.list-bullet {
    padding-right: 0.3rem;
}
.markdown-preview-view .list-bullet::after {
    font-size: 19px;
}
.markdown-source-view .list-bullet::after {
    font-size: 19px;
}

/* Loose lists in reading mode */
:root:root:root li > p {
    margin-block: var(--p-spacing);
}

/* Fix list bullets and indentation lines offset for reading mode */
.markdown-rendered .list-bullet {
    margin-left: -12px;
}
:root .show-indentation-guide li :is(ul, ol)::before {
    left: -11px;
}
ul > .task-list-item {
    margin-left: 6px;
}
.show-indentation-guide .contains-task-list.has-list-bullet::before {
    margin-left: -6px;
}

/* Fix ordered list checkboxes */
ol > li.task-list-item.is-checked[data-task="x"] {
    text-decoration: var(--checklist-done-decoration);
    color: var(--checklist-done-color);
}

/* Indentation lines*/
.cm-indent::before,
ul::before,
ol::before {
    opacity: 0.5;
    border-right: 2px solid var(--fg-blue) !important;
}

/* Checkbox list */
.markdown-source-view.mod-cm6 input.task-list-item-checkbox {
    border-width: 1px;
}
input.task-list-item-checkbox:hover {
    border-color: var(--header-blue);
}
input.task-list-item-checkbox:checked {
    box-shadow: inset 0 0 0 calc(0.0625 * var(--font-text-size))
        var(--background-primary);
    transition: box-shadow 0s;
}
input.task-list-item-checkbox:checked::after {
    -webkit-mask-size: calc(50% + 1px);
}

.checkbox-container {
    background-color: var(--interactive-before);
    transition: background-color var(--anim-duration-moderate)
        cubic-bezier(0, 0.5, 0, 1);
}
.checkbox-container:after {
    background-color: var(--interactive-accent);
}
.checkbox-container.is-enabled:after {
    background-color: var(--bg3);
}

/** Blockquotes **/

.markdown-preview-view blockquote {
    padding-block: 0.25em;
    padding-left: 1.7ch;
}

/* Make blockquotes work in source view */
.markdown-source-view:not(.is-live-preview) .HyperMD-quote {
    background-color: var(--background-embed);
    border-left: var(--blockquote-border-thickness) solid
        var(--blockquote-border-color);
}
.markdown-source-view:not(.is-live-preview)
    .cm-formatting-quote:not(.cm-formatting-quote-1) {
    position: relative;
}
.markdown-source-view:not(.is-live-preview)
    .cm-formatting-quote:not(.cm-formatting-quote-1)::before {
    content: "\200b";
    position: absolute;
    width: 1px;
    border-left: var(--blockquote-border-thickness) solid
        var(--blockquote-border-color);
    color: transparent;
    left: -2px;
}

/** Tables **/

.markdown-rendered table {
    --line-height-tight: 1.375;
}

/* Fix table margin collapse bug and add table margins */
/* They keep changing this and it breaks the theme every time, I'm quite annoyed... */
.markdown-preview-view .block-language-dataview,
.markdown-preview-view div:not([class]):has(> table) {
    overflow: unset !important;

    > table {
        margin-block: var(--p-spacing);
    }
}

/* Fix borders from Dataview */
.table-view-table > thead > tr > th {
    border-left: var(--table-header-border-width) solid
        var(--table-header-border-color);
    border-top: var(--table-header-border-width) solid
        var(--table-header-border-color);
    border-right: var(--table-header-border-width) solid
        var(--table-header-border-color);
}
:root .table-view-table thead > tr > th {
    border-width: var(--table-border-width) 0 3px var(--table-border-width);
}
:root .table-view-table thead > tr > th:last-child {
    border-right-width: var(--table-border-width);
}
:root .table-view-table tbody > tr + tr > td {
    border-top: var(--table-border-width) solid var(--table-border-color);
}
:root .table-view-table tbody > tr > td {
    border-left: var(--table-border-width) solid var(--table-border-color);
}
:root .table-view-table tbody > tr > td:last-child {
    border-right: var(--table-border-width) solid var(--table-border-color);
}
:root .table-view-table tbody > tr:last-child > td {
    border-bottom: var(--table-border-width) solid var(--table-border-color);
}

/** Tags **/

.cm-s-obsidian span.cm-hashtag,
a.tag {
    font-weight: 500;
}

/* Remove spacing between h1 + tag */
div:has(+ div > p > .tag) > h1 {
    margin-bottom: 0;
}
div:has(h1) + div p:has(.tag) {
    margin-top: 0;
}

/** Embeds **/

.markdown-embed {
    --icon-opacity: 0.25;
    padding-inline: 10px;
    padding-block: 0.25rem;
}

/* Fix overflow blocks ruining margin collapse */
.markdown-embed .markdown-preview-sizer > div {
    overflow-x: unset !important;
}

/* Add a shadow to embeds */
.cm-embed-block {
    box-shadow: 0 4px 14px -2px hsla(0, 0%, 0%, 0%);
    transition: box-shadow var(--anim-duration-fast) ease-out;
}

/* Reduce embed edit button opacity */
.markdown-source-view.mod-cm6 .cm-embed-block:hover .edit-block-button {
    opacity: 0.5;
}
.markdown-source-view.mod-cm6 .cm-embed-block:hover .edit-block-button:hover {
    opacity: 1;
}

/*Embed titles*/
.markdown-embed-title {
    display: none;
}

/* Embed backgrounds */
.internal-embed.is-loaded:not(.image-embed, [src$=".excalidraw"]) {
    background-color: var(--blockquote-background-color);
}

/* Embed first header */
.markdown-embed-content
    .markdown-preview-section
    .mod-header
    + div
    :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

/* Embed last p */
.markdown-embed-content .markdown-preview-section > div:last-child > p {
    margin-bottom: 0;
}

/*
    This snippet adds modification in the [[markdown link|modification]] format
*/

/* Clean embed (no background, padding, borders) */
.markdown-embed[alt~="clean"] {
    --blockquote-background-color: transparent;
    border: none;
    padding: 0;
}
/* Removes the first title */
.markdown-embed[alt~="no-title"]
    .markdown-preview-section
    > :is(.mod-header, .mod-header + div:has(.frontmatter))
    + div:has(h1, h2, h3, h4, h5, h6) {
    display: none;
}
/* Removes the embed icon */
.markdown-embed[alt~="no-link"] .markdown-embed-link {
    display: none;
}

/** YAML **/

/* Frontmatter error */
.markdown-rendered .frontmatter.mod-failed:after {
    height: 0;
}
.mod-error {
    font-weight: 500;
}

/**** Graph ****/

.graph-view.color-circle,
.graph-view.color-fill-highlight {
    color: var(--text-muted);
}
.graph-view.color-arrow {
    color: var(--text-normal);
    opacity: 0.5;
}
.graph-view.color-line {
    color: var(--background-modifier-border);
}
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight {
    color: var(--interactive-accent);
}
.graph-view.color-fill-unresolved {
    color: var(--text-muted);
    opacity: 0.4;
}

/**** Mobile ****/

/* Add shadow to mobile navbar */
.mobile-navbar {
    box-shadow: 0 0 8px -4px var(--divider-color);
}
/* Remove new tab button backgrounds */
.is-mobile .empty-state-action {
    background-color: unset;
}

/**** Cursor ****/

.cm-cursorLayer .cm-cursor {
}

/* animation of the blinking */
.cm-cursorLayer {
    /* deactivate built-in animation from CodeMirror */
    animation-name: none !important; /* important needed */
}

.cm-cursorLayer .cm-cursor-secondary {
    border-left-color: var(--text-accent) !important;
    animation-iteration-count: infinite;
    animation-duration: 1200ms;
    animation-timing-function: steps(1);
    animation-name: cm-blink;
}

/* Vim mode cursor */
.cm-editor.cm-focused .cm-fat-cursor {
    background: var(--fg);
    color: var(--bg0);
}

.cm-editor:not(.cm-focused) .cm-fat-cursor {
    outline-color: var(--fg);
}

/**** Style Settings ****/

/* @settings

name: Everforest Enchanted
id: everforest-enchanted-theme
collapsed: false
settings:
-
    id: test-main-description
    title: Welcome!
    description: |
        Use these settings to adjust basic extra settings or various extra elements of the theme. Visit the [GitHub Repo](https://github.com/FireIsGood/obsidian-everforest-enchanted) for more information.
    type: info-text
    markdown: true
-
    id: editor-settings
    title: Editor
    description: Folders, line length, line numbers, menu modal blur
    type: heading
    level: 1
    collapsed: true
-
    id: folder-settings
    title: Folders
    type: heading
    level: 2
    collapsed: true
-
    id: highlighted-folders
    title: Enable highlighted active folders
    description: Adds a background on opened folders.
    type: class-toggle
-
    id: line-length-settings
    title: Line Length
    type: heading
    level: 2
    collapsed: true
-
    id: readable-line-length-custom
    title: Line length
    description: Sets a custom readable line width in pixels.
    type: variable-number
    default: 700
    format: px
-
    id: wide-width-readable-line-length-custom
    title: Wide Line length
    description: Sets a custom readable line width for the CSS class "wide-width" in pixels.
    type: variable-number
    default: 1000
    format: px
-
    id: gutter-settings
    title: Line Numbers
    type: heading
    level: 2
    collapsed: true
-
    id: stacked-panes-gutter-disable-float
    title: Disable stacked tabs floating line numbers
    description: Disables custom line number floating in the stacked tab mode. This makes the line numbers shift over the content in stacked tabs. Use this if your panes are too thin to show them.
    type: class-toggle
-
    id: menu-blur-settings
    title: Menu modals
    type: heading
    level: 2
    collapsed: true
-
    id: disable-menu-animations
    title: Disable menu animations
    description: Disables the floating-up animation of modal menus (e.g. settings, command palette).
    type: class-toggle
-
    id: enable-menu-blur
    title: Enable menu blur
    description: Blur the content behind modal menus (e.g. settings, command palette).
    type: class-toggle
-
    id: menu-blur-radius
    title: Menu blur radius
    description: The amount to blur in pixels.
    type: variable-number
    default: 5
    format: px
-
    id: vim-cursor-settings
    title: Vim
    type: heading
    level: 2
    collapsed: true
-
    id: vim-curor-animate
    title: Animate vim cursor
    description: Adds an animation when moving the vim cursor.
    type: class-toggle
-
    id: vim-cursor-speed
    title: Vim cursor speed
    description: Speed at which the cursor will move
    type: variable-select
    default: var(--anim-duration-superfast)
    options:
        -
            label: FTL
            value: 30ms
        -
            label: Light speed
            value: 45ms
        -
            label: Fast
            value: 55ms
        -
            label: Normal
            value: var(--anim-duration-superfast)
        -
            label: Slow
            value: var(--anim-duration-fast)
        -
            label: Very slow
            value: var(--anim-duration-moderate)
        -
            label: Snail speed
            value: var(--anim-duration-slow)
        -
            label: Molases in January
            value: 1000ms
        -
            label: 0 degrees kelvin
            value: 5s
        -
            label: The seconds hand of the analogue clock in your least favorite middle school class
            value: 20s
        -
            label: Zeno's paradox
            value: 60s
-
    id: element-settings
    title: Elements
    description: Canvas, headers, image embeds, links, lists, math blocks, tables
    type: heading
    level: 1
    collapsed: true
-
    id: canvas-settings
    title: Canvas
    type: heading
    level: 2
    collapsed: true
-
    id: canvas-dot-size
    title: Canvas - Background dot size
    description: The size of dots on the canvas. It starts breaking past 10.
    type: variable-number
    default: 0.7
    format: px
-
    id: header-settings
    title: Headers
    type: heading
    level: 2
    collapsed: true
-
    id: h1-settings
    title: Header 1 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h1-underline
    title: Headers - h1 underline
    description: Enable h1 underline.
    type: class-toggle
    default: false
-
    id: h1-underline-style
    title: Headers - h1 underline style
    description: Change style of the h1 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: h2-settings
    title: Header 2 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h2-underline
    title: Headers - H2 underline
    description: Enable h2 underline.
    type: class-toggle
    default: false
-
    id: h2-underline-style
    title: Headers - H2 underline style
    description: Change style of the h2 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: h3-settings
    title: Header 3 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h3-underline
    title: Headers - h3 underline
    description: Enable h3 underline.
    type: class-toggle
    default: false
-
    id: h3-underline-style
    title: Headers - h3 underline style
    description: Change style of the h3 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: h4-settings
    title: Header 4 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h4-underline
    title: Headers - h4 underline
    description: Enable h4 underline.
    type: class-toggle
    default: false
-
    id: h4-underline-style
    title: Headers - h4 underline style
    description: Change style of the h4 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: h5-settings
    title: Header 5 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h5-underline
    title: Headers - h5 underline
    description: Enable h5 underline.
    type: class-toggle
    default: false
-
    id: h5-underline-style
    title: Headers - h5 underline style
    description: Change style of the h5 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: h6-settings
    title: Header 6 settings
    type: heading
    level: 3
    collapsed: true
-
    id: h6-underline
    title: Headers - h6 underline
    description: Enable h6 underline.
    type: class-toggle
    default: false
-
    id: h6-underline-style
    title: Headers - h6 underline style
    description: Change style of the h6 underline
    type: variable-select
    default: solid
    options:
        -
            label: Solid
            value: solid
        -
            label: Dotted
            value: dotted
        -
            label: Dashed
            value: dashed
-
    id: image-embed-settings
    title: Image Embeds
    type: heading
    level: 2
    collapsed: true
-
    id: image-embed-enable-zoom
    title: Image Embeds - Enable zoom
    description: Enable zooming in on images by clicking on them. Just like minimal! Note that mobile Obsidian already has this.
    type: class-toggle
-
    id: image-embed-no-drag
    title: Image Embeds - Disable dragging
    description: Stop zoomed images from being dragged around. This breaks the blur keyword.
    type: class-toggle
-
        id: image-embed-stretch
        title: Image Embeds - Stretch all images to fit the full width
        description: Makes all images stretch to fit the full width by default. Added as an option to revert behavior.
        type: class-toggle
-
    id: link-settings
    title: Links
    type: heading
    level: 2
    collapsed: true
-
    id: external-link-remove-icon
    title: Links - Remove external link icon
    description: Removes the link icon from external links.
    type: class-toggle
-
    id: list-settings
    title: Lists
    type: heading
    level: 2
    collapsed: true
-
    id: list-indent-custom
    title: Lists - List indent size
    description: The size of list item indents. The default value set here of 28px mimics the appearance of editing mode. If you want a more default experience, the default theme uses 2.25em which is essentially 36px. Currently does not work as intended due to JS changes in Obsidian 1.5 which is sad... There are technically workarounds but they would not be very clean.
    type: variable-number
    default: 28
    format: px
-
    id: math-settings
    title: Math blocks
    type: heading
    level: 2
    collapsed: true
-
    id: disable-math-outline
    title: Math blocks - Disable outline
    description: Removes the outline around math blocks.
    type: class-toggle
-
    id: table-settings
    title: Tables
    type: heading
    level: 2
    collapsed: true
-
    id: centered-tables
    title: Tables - Center alignment
    description: Aligns tables to the center.
    type: class-toggle
-
    id: full-width-tables
    title: Tables - Full width
    description: Makes tables fit the full width.
    type: class-toggle
-
    id: rounded-tables
    title: Tables - Rounded corners
    description: Adds a rounded effect to table corners. Automatically disabled when a table has rowspan as it is not possible to guarantee the correct corners are rounded.
    type: class-toggle
-
    id: rounded-tables-radius
    title: Tables - Rounded corners radius
    description: The corner radius of rounded tables. You may need to reload tabs to see the effect.
    type: variable-number
    default: 8
    format: px
-
    id: extra-appearance-settings
    title: Extras
    description: Background images, Stacked panes with a count, visual parity between modes
    type: heading
    level: 1
    collapsed: true
-
    id: background-image
    title: Background Image
    type: heading
    level: 2
    collapsed: true
-
    id: background-image-description
    title: Info
    description: |
        Adds background images. This is easiest to do with an external URL. If you want to use local images for offline access, you'll have to use a snippet. Check the [GitHub Repo documentation](https://github.com/FireIsGood/obsidian-everforest-enchanted/blob/main/custom_background_image.md) for more information.
    type: info-text
    markdown: true
-
    id: background-image-enabled
    title: Background Image
    description: Enables the background image.
    type: class-toggle
-
    id: background-image-dark-url
    title: Dark Mode Background URL
    description: Set an online background image.
    type: variable-text
    default: url("http://")
-
    id: background-image-light-url
    title: Light Mode Background URL
    description: Set an online background image.
    type: variable-text
    default: url("http://")
-
    id: background-image-position
    title: Background Position
    description: Change where the image is centered.
    type: variable-select
    default: center
    options:
        -
            label: Center
            value: center
        -
            label: Top
            value: top
        -
            label: Bottom
            value: bottom
        -
            label: Left
            value: left
        -
            label: Right
            value: right
        -
            label: Top Left
            value: top left
        -
            label: Top Right
            value: top right
        -
            label: Bottom Left
            value: bottom left
        -
            label: Bottom Right
            value: bottom right
-
    id: pane-opacity
    title: Pane Opacity
    description: How opaque page backgrounds are.
    type: variable-number-slider
    default: 0.85
    min: 0
    max: 1
    step: 0.05
-
    id: ui-opacity
    title: UI Opacity
    description: How opaque UI backgrounds are.
    type: variable-number-slider
    default: 0.85
    min: 0
    max: 1
    step: 0.05
-
    id: tab-opacity
    title: Tab Opacity
    description: How opaque STACKED TAB backgrounds are.
    type: variable-number-slider
    default: 0.85
    min: 0
    max: 1
    step: 0.05
-
    id: background-image-fun
    title: Fun Settings
    type: heading
    level: 3
    collapsed: true
-
    id: background-image-pane-view
    title: Pane view
    description: Changes pages to be panes on a transparent background. BEST USED WITH UI OPACITY 0!
    type: class-toggle
-
    id: custom-stacked-panes
    title: Stacked Pane Count
    type: heading
    level: 2
    collapsed: true
-
    id: custom-stacked-panes-description
    title: Info
    description: |
        This setting turns stacked panes from a pixel width to a number visible on screen at once. Check the [GitHub Repo documentation](https://github.com/FireIsGood/obsidian-everforest-enchanted/blob/main/custom_stacked_panes.md) for more information.
    type: info-text
    markdown: true
-
    id: custom-stacked-panes-enabled
    title: Custom Stacked Panes
    description: Changes stacked panes to fit a certain number on screen instead of using pixel values.
    type: class-toggle
-
    id: custom-stacked-panes-count
    title: Pane Count
    description: The number of panes to show up at once.
    type: variable-number-slider
    default: 2
    min: 1
    max: 5
    step: 1
-
    id: visual-parity
    title: Visual Parity
    type: heading
    level: 2
    collapsed: true
-
    id: visual-parity-description
    title: Info
    description: |
        Changes reading mode to match editing mode visually. This mainly modifies the sizes of margins and makes the top element not have margin to simulare how it works in editing mode.
    type: info-text
    markdown: true
-
    id: visual-parity-enabled
    title: Visual Parity
    description: Enables visual parity.
    type: class-toggle

*/

/** Improve style setting appearance **/
/* Padding on the bottom */
[data-type="style-settings"] .view-content > div:last-child,
.vertical-tab-content > div:has(.style-settings-heading):last-child {
    padding-bottom: 400px;
}

/* Remove default margins */
[data-id="everforest-enchanted-theme"]
    + .style-settings-container
    .setting-item-heading {
    margin-top: 0;
    margin-bottom: 0;
}

/* Style headings */
[data-id="everforest-enchanted-theme"]
    + .style-settings-container
    .setting-item-heading {
    border-color: var(--setting-border-color);
}
.setting-item-heading > .setting-item-info > .setting-item-name {
    color: var(--setting-border-color) !important;
}
/* Style heading containers */
[data-id="everforest-enchanted-theme"]
    + .style-settings-container
    .setting-item-heading
    + .style-settings-container {
    margin-top: 2px;
    padding-top: 16px;
    padding-left: 25px;
    border-width: 0 0 1px 1px;
    border-style: dashed;
    border-color: var(--setting-border-color);
}
/* Style the carat */
.style-settings-collapse-indicator {
    color: var(--setting-border-color);
}

/* Modify the style of setting items */
.view-content
    .style-settings-container
    :is(.setting-item-control:has(input), input[type="text"]) {
    width: 100%;
    place-content: flex-start;
}

/* Heading colors */
/* Yellow skipped for contrast. There will hopefully never be 6 levels of indentation */
[data-level="1"],
[data-level="1"] + .style-settings-container {
    --setting-border-color: var(--header-red);
    --setting-icon-color: var(--fg-red);
}
[data-level="2"],
[data-level="2"] + .style-settings-container {
    --setting-border-color: var(--header-orange);
    --setting-icon-color: var(--fg-orange);
}
[data-level="3"],
[data-level="3"] + .style-settings-container {
    --setting-border-color: var(--header-green);
    --setting-icon-color: var(--fg-green);
}
[data-level="4"],
[data-level="4"] + .style-settings-container {
    --setting-border-color: var(--header-blue);
    --setting-icon-color: var(--fg-blue);
}
[data-level="5"],
[data-level="5"] + .style-settings-container {
    --setting-border-color: var(--header-purple);
    --setting-icon-color: var(--fg-purple);
}

/** Editor Settings **/

/* Highlighted folders */
body.highlighted-folders .nav-folder:not(.is-collapsed, .mod-root) {
    border-radius: var(--radius-s);
    background-color: rgba(var(--mono-rgb-100), 0.05);
}

/* Menu blur */
body:not(.is-translucent).enable-menu-blur .modal-bg {
    backdrop-filter: blur(var(--menu-blur-radius, 5px));
    opacity: 1 !important;
}

/* Vim cursor options */
body.vim-curor-animate .cm-fat-cursor {
    transition:
        left var(--vim-cursor-speed, var(--anim-duration-superfast))
            cubic-bezier(0.39, 0.575, 0.565, 1),
        top var(--vim-cursor-speed, var(--anim-duration-superfast))
            cubic-bezier(0.39, 0.575, 0.565, 1);
}

/** Element Settings **/

/* Custom dot pattern size (style settings) */
.canvas-background > pattern > circle {
    cx: var(--canvas-dot-size, 0.7);
    cy: var(--canvas-dot-size, 0.7);
    r: var(--canvas-dot-size, 0.7);
}

/* Header underlines */
/* H1 underline option */
body.h1-underline h1,
body.h1-underline .HyperMD-header-1.cm-line {
    border-bottom: 2px var(--h1-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}
/* H2 underline option */
body.h2-underline h2,
body.h2-underline .HyperMD-header-2.cm-line {
    border-bottom: 2px var(--h2-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}
/* H3 underline option */
body.h3-underline h3,
body.h3-underline .HyperMD-header-3.cm-line {
    border-bottom: 2px var(--h3-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}
/* H4 underline option */
body.h4-underline h4,
body.h4-underline .HyperMD-header-4.cm-line {
    border-bottom: 2px var(--h4-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}
/* H5 underline option */
body.h5-underline h5,
body.h5-underline .HyperMD-header-5.cm-line {
    border-bottom: 2px var(--h5-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}
/* H6 underline option */
body.h6-underline h6,
body.h6-underline .HyperMD-header-6.cm-line {
    border-bottom: 2px var(--h6-underline-style, solid)
        var(--background-modifier-border);
    padding-bottom: 2px;
}

/* External links */
body.external-link-remove-icon {
    & .cm-formatting.external-link {
        display: none;
    }
    & a.external-link {
        background-image: none;
        padding-right: unset;
    }
}

/* Image zoom */
body.image-embed-enable-zoom {
    & .image-embed {
        & img {
            cursor: zoom-out;
        }

        &:active {
            --zoom-embed-size: min(
                90%,
                calc(var(--readable-line-length-custom, 700px) + 120px)
            );
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: fixed;
            max-width: 100%;
            width: 100% !important;
            margin: auto 0 !important;
            inset: 0;
            object-fit: contain;
            z-index: 1;
        }
        &:active img {
            width: var(--zoom-embed-size) !important;
            max-height: 80%;
            margin: 0 !important;
            user-select: none;
            object-fit: contain;
        }
        &:active::after {
            margin-inline: 0 !important;
            padding: 1ch;
            font-size: large;
            box-sizing: border-box;
            width: var(--zoom-embed-size) !important;
            background-color: var(--background-primary);
        }
        &:active::before {
            content: "";
            position: absolute;
            background-color: var(--color-base-00);
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.75;
        }
    }

    /* Option to disable dragging */
    &.image-embed-no-drag .image-embed:active img {
        pointer-events: none;
    }

    /* Hacky fix for callouts */
    & .cm-embed-block.cm-callout:has(.image-embed:active) {
        contain: none !important;
    }
}

/* List indent size */
/* Set in the body selector at the top */

/* Math */
/* Outlines for math blocks (enabled by default) */
body:not(.disable-math-outline)
    :is(
        div.math-block,
        span.math-block > mjx-container,
        .math.math-block.cm-embed-block
    ) {
    border: 1px solid var(--bg5);
    border-radius: 5px;
}

/* Tables */
/* Centered tables */
body.centered-tables table {
    margin-inline: auto;
}

/* Full width tables */
body.full-width-tables table {
    width: 100%;
}

/* Rounded tables */
body.rounded-tables :where(table:not(:has([rowspan]))) {
    border-collapse: separate;
    border-spacing: 0;

    & :is(td, th) {
        border-width: 0 var(--table-border-width) var(--table-border-width) 0;
    }
    & th:first-of-type {
        border-top-left-radius: var(--rounded-tables-radius, 8px);
    }
    & th:last-of-type {
        border-top-right-radius: var(--rounded-tables-radius, 8px);
    }
    & tr:last-of-type td:first-of-type {
        border-bottom-left-radius: var(--rounded-tables-radius, 8px);
    }
    & tr:last-of-type td:last-of-type {
        border-bottom-right-radius: var(--rounded-tables-radius, 8px);
    }
}

/** Custom Stacked Panes **/

.custom-stacked-panes-enabled .mod-vertical .mod-stacked .workspace-leaf {
    max-width: calc(
        (100% / var(--custom-stacked-panes-count, 2)) - 2.5rem
    ) !important;
    width: 100% !important;
}

/** Custom Background Image **/

.theme-dark {
    --background-image-url: var(--background-image-dark-url);
}
.theme-light {
    --background-image-url: var(--background-image-light-url);
}

body.background-image-enabled {
    /* This breaks canvas screenshots! */
    --canvas-background: transparent;

    --background-transparent: rgba(
        var(--background-primary-rgb),
        var(--pane-opacity, 0.85)
    );
    --background-partially-transparent: rgba(
        var(--background-primary-rgb),
        var(--ui-opacity, 0.85)
    );
    --background-tabs-transparent: rgba(
        var(--background-primary-rgb),
        var(--tab-opacity, 0.85)
    );
}

/* Apply the background image */
.background-image-enabled .horizontal-main-container {
    background-color: var(--background-primary);
    background-image: var(--background-image-url);
    background-position: var(--background-image-position, center);
    background-size: cover;
}

/* Make panes transparent */
.workspace-tab-container::-webkit-scrollbar-track,
.background-image-enabled :is(.mod-root .view-content, .view-header) {
    background-color: var(--background-transparent) !important;
}

/* Make workspace UI elements transparent */
.background-image-enabled
    :is(
        .mod-root .workspace-tab-header-container,
        .workspace-ribbon,
        .workspace-split,
        .graph-controls
    ),
.workspace-ribbon::before {
    background-color: var(--background-partially-transparent) !important;
}

/* Make stacked tab headers transparent */
.background-image-enabled
    .workspace-tab-container
    .workspace-tab-header:not(.mod-active),
.background-image-enabled
    .workspace-tab-container
    .workspace-tab-header.mod-active {
    background-color: var(--background-tabs-transparent) !important;
}

/* Remove other backgrounds */
.background-image-enabled
    :is(
        .titlebar-button-container,
        .mod-vertical .workspace-tab-header,
        .document-search-container,
        .workspace-leaf,
        .horizontal-main-container > .workspace,
        .pdf-sidebar-container,
        .pdf-container,
        .pdf-toolbar
    ),
.background-image-enabled
    .workspace-split:not(.mod-root, .mod-horizontal)
    .workspace-tab-header-container,
.background-image-enabled
    .workspace-split:not(.mod-left-split, .mod-right-split),
.background-image-enabled
    .workspace-split.mod-left-split
    .workspace-sidedock-vault-profile {
    background-color: transparent !important;
}
/* Fix double side headers */
.background-image-enabled .workspace-tab-header-container {
    background-color: unset;
}

/* Remove tabs weird gradients and exterior curves */
.background-image-enabled .workspace-tab-header.is-active::before,
.background-image-enabled .workspace-tab-header.is-active::after,
.background-image-enabled .view-header-title-container:not(.mod-at-end):after {
    display: none;
}

/* Pane view */
.background-image-pane-view .view-content:has(.markdown-reading-view) {
    background-color: transparent !important;
}
.background-image-pane-view .view-content .cm-sizer,
.background-image-pane-view
    .view-content
    > .markdown-reading-view
    > .markdown-rendered
    > .markdown-preview-sizer {
    box-sizing: content-box;
    padding-inline: 2rem;
    padding-top: 2rem;
    border-radius: 1rem;
    background-color: var(--background-transparent) !important;
}
.background-image-pane-view .view-content .cm-sizer:has(.cm-gutters) {
    padding-left: calc(2rem + 24px);
}
:root .background-image-pane-view .view-header {
    background-color: var(--background-partially-transparent) !important;
}
/* New tab page */
:root .background-image-pane-view .view-content:has(> .empty-state) {
    width: fit-content;
    height: unset;
    margin: auto;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 1rem;
}
.background-image-enabled .empty-state {
    position: static;
}

/** Visual Parity **/
body.visual-parity-enabled {
    --p-spacing: calc(1.5 * var(--font-text-size));
    --heading-spacing: calc(var(--p-spacing) * 1);

    /* Fix hr elements */
    .markdown-rendered hr {
        margin-block: calc(
            (
                    var(--font-text-size, 1rem) * var(--line-height-normal) -
                        var(--hr-thickness)
                ) / 2 + var(--p-spacing)
        );
    }

    /* Fix header top margins */
    .is-live-preview .cm-content > .HyperMD-header {
        padding-top: unset;
    }

    .markdown-source-view.mod-cm6 .cm-table-widget {
        padding-block: 0;
    }

    /* Fix collapsed headers in live preview */
    .HyperMD-header:has(> .is-collapsed) {
        padding-block: 0 var(--p-spacing);
    }

    /* Fix blockquotes */
    & :not(blockquote) + blockquote,
    & .cm-line:not(.HyperMD-quote-1) + .HyperMD-quote-1,
    & .HyperMD-quote-1:first-child {
        padding-top: 0.25em !important;
    }
    & blockquote:has(+ :not(blockquote)),
    & .HyperMD-quote-1:has(+ .cm-line:not(.HyperMD-quote-1)),
    & .HyperMD-quote-1:last-child {
        padding-bottom: 0.25em !important;
    }
}

/**** Extra Fixes ****/

/** Callouts **/

.callout {
    --callout-content-padding: var(--size-4-2) var(--size-4-4);
    --callout-content-color: rgba(var(--bg-dim-rgb), 0.3);
    --callout-border-solid: 1px solid rgba(var(--callout-color), 0.3);
    --callout-border-dashed: 1px dashed rgba(var(--callout-color), 0.4);
    padding: 0;
    border-left: 0.125rem solid rgba(var(--callout-color), 0.7);
    border-top: var(--callout-border-solid);
    border-right: var(--callout-border-solid);
    border-bottom: var(--callout-border-solid);
    border-radius: 4px;
    mix-blend-mode: normal !important;
}
.callout,
.cm-callout {
    box-shadow: 2px 2px 3px #0004;
}
.callout-title {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-radius: 2px 2px 0 0;
    background-color: rgba(var(--callout-color), 0.2);
}
.callout.is-collapsible .callout-title {
    cursor: pointer !important;
}
.callout-icon svg.svg-icon {
    color: rgb(var(--callout-color));
}
.callout-title-inner {
    color: color-mix(
        in srgb,
        rgb(var(--callout-color)) 70%,
        var(--color-base-100)
    );
    filter: contrast(2);
}
.callout-title-inner > * {
    filter: contrast(0.5);
}
.callout-fold {
    margin-left: auto;
}
.callout-content {
    border-top: var(--callout-border-dashed);
    border-radius: 0 0 2px 2px;
    background-color: rgba(var(--bg-dim-rgb), 0.3);
}
.callout-content > *:first-child {
    margin-top: 0;
}
.callout-content > *:last-child {
    margin-bottom: 0;
}

/* Quote callout */
.callout[data-callout="quote"] {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
}
.callout[data-callout="quote"] .callout-title {
    background-color: var(--callout-content-color);
    padding: 0 1ch 1ch;
    display: block;
    text-align: right;
}
.callout[data-callout="quote"] .callout-title .callout-icon {
    display: none;
}
.callout[data-callout="quote"] .callout-content {
    border: none;
    padding-top: var(--size-4-4);
}

/* Custom callouts */
/* Uses Material Colors 300-500 + A100 */
.callout[data-callout="math"] {
    --callout-color: 132, 255, 255;
    --callout-icon: lucide-sigma;
}
.callout[data-callout="math"] .callout-content {
    padding: 0 !important;
}
.callout[data-callout="math"] .callout-content .math-block {
    border: none;
}
.callout[data-callout="graph"] {
    --callout-color: 255, 152, 0;
    --callout-icon: lucide-line-chart;
}
.callout[data-callout="image"] {
    --callout-color: 234, 128, 252;
    --callout-icon: lucide-image;
}
.callout[data-callout="image"] .callout-content {
    padding: 0 !important;
}
.callout[data-callout="code"] {
    --callout-color: 76, 175, 80;
    --callout-icon: lucide-curly-braces;
}
.callout[data-callout="code"] .callout-content {
    padding: 0 !important;
}
.callout[data-callout="code"] .callout-content > pre {
    margin-block: 0;
    background-color: var(--code-background);
}

/** Image Formatting **/

img {
    display: block;
    margin-inline: auto;
    image-rendering: auto !important;
}

/* Makes multiple images on the same line appear in a flex grid */
/* Editing mode part */
.cm-line:not(.cm-active):has(
        .image-embed ~ .image-embed,
        img:not(.cm-widgetBuffer) ~ img:not(.cm-widgetBuffer)
    ):not(:has([alt="inline"])),
p:has(.image-embed ~ .image-embed, img ~ img):not(:has([alt="inline"])) {
    display: flex;
    gap: 0.5rem;
    align-items: start;

    & > .image-embed {
        flex: 1 1 0;
        display: flex;
        justify-content: center;
    }
    & > .cm-widgetBuffer {
        display: none !important;
    }
}
/* Makes a highlighted line shrink the image */
:root:root
    .cm-line.cm-active
    > :is(.image-embed:not([alt="inline"]), img:not([alt="inline"])) {
    width: 100px;
    display: inline-block;
}
/* Centers the image if it is modified */
:root:root .cm-line:not(.cm-active) > .image-embed:not([alt="inline"]),
p > .image-embed:not([alt="inline"]) {
    display: flex;
    place-items: center;
    flex-direction: column;
}

/* Disable changes if images have the alt text is exactly inline */
img[alt="inline"] {
    display: inline !important;
}

/*
    This snippet adds modification in the ![[image link# modification|caption]] format
    Excalidraw is not supported as it has its own format of using alt text set max width in pixels
*/

/* Style setting to revert to old behavior */
.image-embed-stretch {
    --img-width: 100;
}

/* Sizing */
.image-embed > img:not([width]),
span > img[src^="http"]:not([width]) {
    display: block;
    width: calc(var(--img-width) / 100 * min(100%, var(--file-line-width)));
    margin-right: auto;
}
.image-embed[src~="1/4"],
img[src^="http"][alt~="1/4"] {
    --img-width: 25;
}
.image-embed[src~="2/5"],
img[src^="http"][alt~="2/5"] {
    --img-width: 40;
}
.image-embed[src~="1/3"],
img[src^="http"][alt~="1/3"] {
    --img-width: 33.3;
}
.image-embed[src~="1/2"],
img[src^="http"][alt~="1/2"] {
    --img-width: 50;
}
.image-embed[src~="3/5"],
img[src^="http"][alt~="3/5"] {
    --img-width: 60;
}
.image-embed[src~="2/3"],
img[src^="http"][alt~="2/3"] {
    --img-width: 66.6;
}
.image-embed[src~="3/4"],
img[src^="http"][alt~="3/4"] {
    --img-width: 75;
}
.image-embed[src~="4/5"],
img[src^="http"][alt~="4/5"] {
    --img-width: 80;
}
.image-embed[src~="1/1"],
.image-embed[src~="full"],
img[src^="http"][alt~="1/1"],
img[src^="http"][alt~="full"] {
    --img-width: 100;
}

/* Alignment */
.image-embed[src~="left"] > img,
.markdown-source-view.mod-cm6 .cm-content img[src^="http"][alt~="left"],
img[src^="http"][alt~="left"] {
    margin-left: 0 !important;
}
.image-embed[src~="right"] > img,
.markdown-source-view.mod-cm6 .cm-content img[src^="http"][alt~="right"],
img[src^="http"][alt~="right"] {
    margin-right: 0 !important;
}
/* External images */
.markdown-source-view.mod-cm6 .cm-content > img {
    margin-inline: auto !important;
}

/* Floats */
.markdown-reading-view .image-embed[src~="float"] > img:not([width]) {
    width: calc(
        var(--img-width, 100) / 100 * min(100vw, var(--file-line-width))
    );
    margin: 0 !important;
}
.markdown-reading-view .image-embed[src~="float"] {
    clear: both;
}
.markdown-reading-view .image-embed[src~="float"][src~="left"] {
    float: left;
    margin-right: 2%;
}
.markdown-reading-view .image-embed[src~="float"][src~="right"] {
    float: right;
    margin-left: 2%;
}

/* Image alt text other modifications */
.image-embed[src~="white"] > img,
img[src^="http"][alt~="white"] {
    background-color: white;
}
.image-embed[src~="black"] > img,
img[src^="http"][alt~="black"] {
    background-color: black;
}
.image-embed[src~="border"] > img,
img[src^="http"][alt~="border"] {
    border: 0.25rem solid var(--background-modifier-border);
}
.image-embed[src~="shadow"] > img,
img[src^="http"][alt~="shadow"] {
    box-shadow: 2px 2px 4px #0007;
}
.image-embed[src~="rounded"] > img,
img[src^="http"][alt~="rounded"] {
    border-radius: 0.5rem;
}
.image-embed[src~="blur"] > img,
img[src^="http"][alt~="blur"] {
    filter: blur(5px);
    transition: filter 500ms 250ms ease;
}
.image-embed[src~="blur"] > img:hover,
img[src^="http"][alt~="blur"]:hover {
    filter: blur(0);
}

/* Alt text as caption under image */
body:not(.no-image-alttext-caption)
    .image-embed:not(
        [alt*=".png"],
        [alt*=".gif"],
        [alt*=".jpg"],
        [alt*=".jpeg"],
        [alt*=".tiff"],
        [alt*=".avif"],
        [alt*=".webp"],
        [alt="inline"],
        [width]
    )::after {
    content: attr(alt);
    display: block;
    color: var(--text-muted);
    text-align: center;
    width: calc(
        var(--img-width, 100) / 100 * min(100%, var(--file-line-width))
    );
}
/* Align the text boxes correctly */
.image-embed {
    &::after {
        margin-inline: auto;
    }
    &[src~="left"]::after {
        margin-inline: 0 auto;
    }
    &[src~="right"]::after {
        margin-inline: auto 0;
    }
    :root .markdown-preview-view &[src~="float"]::after {
        width: 100%;
    }
}

/** CSS Classes **/

/* Custom width layouts */
.full-width {
    --file-line-width: 100%;
}
.wide-width {
    --file-line-width: var(--wide-width-readable-line-length-custom, 1000px);
}

/* Numbered lists to columns in read mode */
.columns :where(div, li) > ol {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    padding-left: 0;
}
.columns :where(div, li) > ol > li {
    outline: 1px solid var(--color-base-40);
    padding: 0.5rem 0.75rem;
}
.columns :where(div, li) > ol > li > ul {
    background: none;
}
.columns :where(div, li) > ol > li > .list-collapse-indicator {
    display: none;
}
.columns :where(div, li) > ol > li > :where(ul, ol):before {
    border-right: none !important;
}

/* Custom dashboard */
/* Title at top of the document */
.dashboard {
    & .markdown-preview-section .title {
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        font-size: 26pt !important;
        font-weight: bolder;
        letter-spacing: 8px;
    }

    & h1 {
        border-bottom-style: dotted !important;
        border-width: 1px !important;
        padding-bottom: 3px !important;
    }
    & div > ul:not(.dataview) {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.5rem;
        padding-left: 0;
        & > li {
            outline: 1px solid var(--bg5);
            padding: 0.5rem 0.25rem;
        }
    }

    & div > ul > li {
        & > .list-bullet {
            display: none;
        }
        & .list-collapse-indicator {
            display: none;
        }
        & ul:before {
            border-right: none !important;
        }
    }
}

/** Misc. **/

/* Fix Dataview markers */
.dataview.list-view-ul li {
    list-style-type: none;
}
.dataview.list-view-ul li::before {
    visibility: visible;
    position: absolute;
    content: "\200B";
    pointer-events: none;
    border-radius: var(--list-bullet-radius);
    width: var(--list-bullet-size);
    height: var(--list-bullet-size);
    border: var(--list-bullet-border);
    transform: translate(-0.85em, 0.6em);
    background-color: var(--list-marker-color);
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.table-view-table > tbody > tr:hover {
    background-color: var(--table-row-background-hover) !important;
}

/* Make math display better */
div.math-block {
    padding-block: 0.125em;
}
/* Make the weird span ones also work */
span.math-block > mjx-container {
    padding-block: 1rem;
}

/* Make MathJax text bigger */
.MJX-TEX {
    font-size: 110%;
}
/* Make \overline{} display on higher resolution screens*/
mjx-stretchy-h.mjx-c2013 mjx-ext mjx-c::before {
    font-weight: 900;
}

/* Make print break hr elements */
hr.page-break {
    opacity: 0.5;
    height: 1.5rem;
    display: flex;
    border-top: 4px dotted;
    background-color: unset;
}
hr.page-break::before {
    content: "Page Break";
    font-size: 0.75em;
    margin-inline: auto;
}
@media print {
    hr.page-break {
        visibility: hidden;
        page-break-after: always;
    }
}

/* Fix weird ol bug */
ol > li > p {
    margin: 0;
}

/* Make backlinks padding more consistent */
.markdown-preview-view .embedded-backlinks {
    margin-top: 100px;
}

/* Fix specific word break difference */
:root .cm-lineWrapping {
    white-space: unset;
}